<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
    <meta name="screen-orientation" content="portrait" />
    <meta name="x5-orientation" content="portrait" />
    <meta name="wap-font-scale" content="no" />
    <meta name="msapplication-tap-highlight" content="no" />
    <title>四川佳诺信息技术有限公司</title>
    <link rel="stylesheet" href="js/mui/css/mui.min.css"/>
    <link rel="stylesheet" href="css/payBill.css"/>
</head>
<body>
<div class="main-page">
    <header class="header">
        <a href="javascript:;" class="head-tap">
            <span class="head-icon head-left"></span>
        </a>
        <div class="title">
            四川佳诺信息技术有限公司
        </div>
    </header>
    <div class="content" id="content">
        <div class="section">
            <div class="pay" id="inputPrice" data-price="0.01">
               <span class="mui-ellipsis">消费金额</span>
               <span class="mui-pull-right mui-ellipsis">￥0.01</span>
            </div>
            <div class="pay-free" id="freePrice">
                <a href="javascript:;" class="free-ctrl"><img src="images/add.png"><span class="text">输入不享优惠金额</span></a>
            </div>
        </div>
        <div class="section">
            <div class="list-item">
                <span class="mui-ellipsis label"><span class="text">每满1元减0.5元</span><img src="images/error-g.png"/></span>
                <span class="mui-pull-right mui-ellipsis">￥0.01</span>
            </div>
            <div class="list-item" id="addMoney">
                储值<span class="money">（余额:0元）</span><span class="red">充2元送1元</span>
            </div>
        </div>
        <div class="section">
            <h2 class="title">支付方式</h2>
            <ul class="mui-table-view">
                <li class="mui-table-view-cell mui-radio mui-right">
                    <span class="middle">
                        <img src="images/weiChat.png"><span class="text mui-ellipsis">微信支付</span>
                    </span>
                    <input name="checkbox" type="radio" checked>
                </li>
                <!--<li class="mui-table-view-cell mui-radio mui-right">-->
                    <!--<span class="middle">-->
                        <!--<img src="images/ZFB.png"><span class="text mui-ellipsis">支付宝</span>-->
                    <!--</span>-->
                    <!--<input name="checkbox" type="radio" >-->
                <!--</li>-->
            </ul>
        </div>
        <div class="btn-wrapper">
            <button type="button" class="submit">确认买单0.01元</button>
        </div>
        <p class="remark">交易由<img src="images/huatai.jpg" height="30">承保</p>
        <div id="login" class="mui-popover mui-popover-bottom mui-popover-action ">
            <div class="login">
                <h2 class="title">免费注册</h2>
                <input type="text" class="input-phone" placeholder="请输入手机号"/>
                <div>
                    <button type="button" class="mui-btn mui-btn-warning mui-btn-block">快速注册</button>
                </div>
                <p class="remark"><a href="javascript:;">已是会员，请登录</a></p>
            </div>
        </div>
    </div>
</div>
<script src="js/mui/js/mui.min.js"></script>
<script>
    mui.init();
    var btnArray = ['取消', '确定'];
    var hasInput=false;///判断是否输入金额
    mui("#content").on("tap","#inputPrice",function () {
        var self=this;
        mui.prompt('', '消费金额', '请输入消费金额', btnArray, function(e) {
            if (e.index == 1) {
                var price=self.getAttribute("data-price");
                if(e.value!=""&&e.value>0&&price!=e.value){
                    hasInput=true;
                    var span=self.querySelector(".mui-pull-right");
                    if(span){
                        span.textContent="￥"+e.value
                    }
                }else {
                    mui.toast('输入金额必须大于0');
                }
            }
        });
        var input=document.querySelector(".mui-popup-input input");
        if(input){
            input.setAttribute("type","number");
        }
    });
    mui("#content").on("tap","#freePrice",function () {
        if(hasInput){
            mui.prompt('', '不享优惠金额', '请输入不享优惠金额', btnArray, function(e) {
                if (e.index == 1) {
                    alert(e.value)
                } else {
                    alert("取消")
                }
            });
            var input=document.querySelector(".mui-popup-input input");
            if(input){
                input.setAttribute("type","number");
            }
        }
    });

    var hasLogin=false;//判断是否登录默认未登录
    mui("#content").on("tap","#addMoney",function () {
        if(hasLogin){
            mui.prompt('', '充值金额', '请输入充值金额', btnArray, function(e) {
                if (e.index == 1) {
                    alert(e.value)
                   //return false  不关闭对话框时使用
                } else {
                    alert("取消")
                }
            });
            var input=document.querySelector(".mui-popup-input input");
            if(input){
                input.setAttribute("type","number");
            }
        }else {
            mui('#login').popover('toggle');
        }
    });
</script>
</body>
</html>